<template>
  <div class="left-main">
    <!---左边部分-->
    <div class="fav-sidenav">
      <div class="fav-sidenav-border">
        <div class="components-body">
          <span class="components-body-span" style="color: #99a2aa">我的关注</span>
          <span class="iconfont icon-htmal5icon18 follow-add" @click="changeGroupBy('add')"></span>
        </div>
        <!--话题菜单-->
        <div @click="cursorShowIndex=-1;fansAction=true;moveShow=false;copyShow=true"
             :class="['components-body components-body-hover',{clickSubscribeMenu:cursorShowIndex==-1}]">
          <span :class="['iconfont icon-yonghu span-dingyue',{clickIconColor:cursorShowIndex==-1}]"></span>
          <span class="components-body-span">全部关注</span>
          <span class="components-body-right-span">100</span>
        </div>
        <div @click="cursorShowIndex=-2;fansAction=true;copyShow=true;moveShow=true;"
             :class="['components-body components-body-hover',{clickSubscribeMenu:cursorShowIndex==-2}]">
          <span
              :class="['iconfont icon-xinzengguanzhuyonghu span-dingyue',{clickIconColor:cursorShowIndex==-2}]"></span>
          <span class="components-body-span">特别关注</span>
          <span class="components-body-right-span">100</span>
        </div>
        <div @click="cursorShowIndex=-3;fansAction=true;copyShow=true;moveShow=true;"
             :class="['components-body components-body-hover',{clickSubscribeMenu:cursorShowIndex==-3}]">
          <span :class="['iconfont icon-Icon_huabanfuben span-dingyue',{clickIconColor:cursorShowIndex==-3}]"></span>
          <span class="components-body-span">悄悄关注</span>
          <span class="components-body-right-span">1</span>
        </div>
        <div @click="cursorShowIndex=-4;fansAction=true;copyShow=false;moveShow=true"
             :class="['components-body components-body-hover',{clickSubscribeMenu:cursorShowIndex==-4}]">
          <span :class="['iconfont icon-shoucang span-dingyue',{clickIconColor:cursorShowIndex==-4}]"></span>
          <span class="components-body-span">默认分组</span>
          <span class="components-body-right-span">100</span>
        </div>
        <div @click="cursorShowIndex=item.id;fansAction=true;copyShow=true;moveShow=true;" @mouseover="showBgIndex = item.id" @mouseout="showBgIndex = 0"
             :class="['components-body components-body-hover',{clickSubscribeMenu:cursorShowIndex==item.id}]"
             v-for="(item,index) in fgroupList" :key="index">
          <span :class="['iconfont icon-yonghu1 span-dingyue',{clickIconColor:cursorShowIndex==item.id}]"></span>
          <span class="components-body-span">{{ item.name }}</span>
          <el-popover
              placement="right"
              popper-class="el-popover-self-five"
              trigger="hover">
            <template #reference>
              <div>
                <!--空白节点问题，两个inline-block元素之间会有一个缝隙，这往往是不希望见到的，解决办法有很多，网上都可以搜到，不过最简单，且符合语义的，是用注释。即使是压缩代码之后把注释删掉了，也不会有影响。-->
                <span class="components-body-right-span more-menu" v-show="showBgIndex != item.id">{{ item.count }}</span>
                <!---->
                <span class="more-menu"  v-show="showBgIndex == item.id">
                  <span class="iconfont icon-caidan caidan-size" title="跟多操作"></span>
                </span>
                <!---->
              </div>
            </template>
            <ul class="ul-dropdown-item">
              <li class="be-dropdown-item-delimiter" @click="changeGroupBy('edit',item.name);groupByItem=item">修改名称</li>
              <li class="be-dropdown-item-delimiter" @click="changeGroupBy('delete');groupByItem=item">删除</li>
            </ul>
          </el-popover>
        </div>
      </div>
      <div class="fav-sidenav-border">
        <div class="components-body">
          <span class="components-body-span" style="color: #99a2aa">我的粉丝</span>
        </div>
        <!--话题菜单-->
        <div @click="myChengeFollow"
             :class="['components-body components-body-hover',{clickSubscribeMenu:cursorShowIndex==-5}]">
          <span :class="['iconfont icon-wodeguanzhu span-dingyue',{clickIconColor:cursorShowIndex==-5}]"></span>
          <span class="components-body-span">我的粉丝</span>
          <span class="components-body-right-span">100</span>
        </div>
      </div>
    </div>
    <!---右边部分-->
    <div class="fav-main section">
      <!--顶部部分-->
      <div class="favList-info" style="overflow: hidden">
        <div style="float:left;" v-show="groupIndex">{{ groupName }}</div>
        <div v-show="!groupIndex" @click="groupIndex=!groupIndex" style="float:left;" class="back-to-info">
          <span class="iconfont icon-lujing1376 back-to-color"></span>返回
        </div>
        <div class="follow-tabs" v-show="groupIndex">
          <div v-if="cursorShowIndex==-1" class="be-tab">
            <ul class="be-tab-inner clearfix">
              <li :class="['be-tab-item',{isActive:isActive==1}]" @click="barOffset=0;isActive=1">
                <span>最近访问</span>
              </li>
              <li :class="['be-tab-item',{isActive:isActive==2}]" @click="barOffset=68;isActive=2">
                <span>最近关注</span>
              </li>
            </ul>
            <div class="be-tab-cursor" :style="barStyle"></div>
          </div>
          <!--中部搜索框-->
          <div v-if="cursorShowIndex==-1" class="clearfix g-search search-container">
            <input type="text" placeholder="搜索关注、粉丝" class="space_input">
            <span class="iconfont icon-sousuo search-btn"></span>
          </div>
          <span @click="groupIndex=!groupIndex" class="iconfont icon-multiple fav-right-multiple"></span>
        </div>
      </div>
      <!--视频列表部分-->
      <div class="fav-content">
        <div style="position: relative;padding: 20px 20px 0 20px" v-show="!groupIndex">
          <ul class="clearfix filter-disable">
            <li v-if="copyShow"><i class="iconfont icon-copy copy-yido-icon" :class="(checkList.length>0)?'isCheckedColor':''"></i>
              <span :class="checkList.length>0?'hover-blue-cursor':'hover-nodrop'">复制到</span>
            </li>
            <li v-if="moveShow"><i class="iconfont icon-yido copy-yido-icon" :class="(checkList.length>0)?'isCheckedColor':''"></i>
              <span :class="checkList.length>0?'hover-blue-cursor':'hover-nodrop'">移动到</span>
            </li>
          </ul>
          <div class="fav-select-up">
            <span style="color: #99a2aa">已选择{{upCount}}个up主</span>
            <span v-show="checkList.length>0" @click="cancelMul" class="fav-select-cursor">取消选择</span>
          </div>
        </div>
        <ul class="filter-disable" style="padding: 0 20px;">
<!--          <el-button @click="ceshi">Default</el-button>-->
          <el-checkbox-group v-model="checkList" size="large">
            <li class="list-item list-item-select" style="width: 100%" v-for="item in rightFollowList" :key="item">
              <div class="position-ab-label" v-if="!groupIndex">
                <el-checkbox :label="item" class="myRedCheckBox"></el-checkbox>
              </div>
              <div class="cover-container" :class="groupIndex==false?'cover-container-mal':''">
                <!--头像部分-->
                <div class="bili-avatar" style="width: 100%;height:100%;">
                  <img style="width: 100%;height: 100%;object-fit: cover" :src="require('/src/assets/img/picture.png')" alt="">
                </div>
                <span class="iconfont icon-tedianshandianfahuo bili-avatar-right-icon"></span>
              </div>
              <div class="content" :class="groupIndex==false?'content-mal':''">
                <div class="title">
                  <!--大会员color: rgb(251, 114, 153);后端动态获取-->
                  <span class="fans-name">哔哩哔哩漫画</span>
                </div>
                <p title="哔哩哔哩漫画官方账号" class="auth-description">哔哩哔哩漫画官方账号</p>
                <div class="fans-action">
                  <el-popover
                      placement="bottom"
                      popper-class="el-popover-self-five"
                      trigger="hover">
                    <template #reference>
                      <div class="fans-action-follow" v-if="fansAction">
                        <span class="iconfont icon-liebiao1-copy"></span>
                        已关注
                      </div>
                    </template>
                    <ul class="ul-dropdown-item">
                      <li class="be-dropdown-item-delimiter">设置分租</li>
                      <li class="be-dropdown-item-delimiter">取消关注</li>
                    </ul>
                  </el-popover>
                  <div class="fans-action-follow-go" v-if="!fansAction">
                    √  关注
                  </div>
                  <el-popover
                      placement="right"
                      popper-class="el-popover-self-five"
                      trigger="hover">
                    <template #reference>
                      <span class="iconfont icon-menu-v fans-action-menu" title="跟多操作"></span>
                    </template>
                    <ul class="ul-dropdown-item">
                      <li class="be-dropdown-item-delimiter">发消息</li>
                      <li v-if="!fansAction" class="be-dropdown-item-delimiter">移除粉丝</li>
                    </ul>
                  </el-popover>
                </div>
              </div>
            </li>
          </el-checkbox-group>
        </ul>
        <!--分页-->
        <div style="margin: 30px 0 20px 0;display: flex;">
          <div class="pagination">
            <el-config-provider :locale="zhCn">
              <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  prev-text="上一页" next-text="下一页"
                  :total="totalCount" :page-size="pageSize" hide-on-single-page/>
            </el-config-provider>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="groupByDialogVisible" :close-on-click-modal="false" :title="groupByTitle" width="300" center @close="groupByClose">
    <el-input
        v-if="!deleteIndex"
        v-model="groupByName"
        maxlength="16"
        placeholder="最多输入16个字"
        show-word-limit
        type="text"
    />
    <div style="height: 50px;text-align: center;" v-if="deleteIndex">
      <span>确定要删除该分组么？删除之后，该分组下的用户依旧保留</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="realGroupBy">
          确认
        </el-button>
        <el-button @click="groupByDialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!--提示信息弹出框-->
  <show-message ref="showCoinsMessage"></show-message>
</template>
<script>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import ShowMessage from "@/components/showMessage";

export default {
  name: "myFollow",
  props: {
    followIndexData: {
      type: String,
      default: ''
    }
  },
  components:{
    ShowMessage
  },
  data() {
    return {
      zhCn,
      totalCount:80,
      pageSize:15,
      fgroupList: [
        {id: 1, name: '关注分组1', count: 12},
        {id: 2, name: '关注分组2', count: 1},
        {id: 3, name: '关注分组3', count: 120},
      ],
      cursorShowIndex: -1,
      showBgIndex: -1,
      groupName: '全部关注',
      groupIndex: true,
      upCount: 0,
      checkList:[],
      rightFollowList:[1,2,3],
      fansAction:true,
      // 控制复制与移动按钮
      copyShow:true,
      moveShow:false,
      groupByDialogVisible:false,
      groupByName:'',
      // 用于修改和删除时保存的临时对象
      groupByItem:{},
      // 标签默认宽度
      barWidth: 48,
      // 标签偏移量
      barOffset: 0,
      isActive: 1,
      groupByTitle:'',
      deleteIndex:false,
      // 分组增删改弹出框确认操作
      groupReal:'',
    }
  },
  computed: {
    // 动态计算标签默认宽度和偏移量
    barStyle() {
      return {
        width: `${this.barWidth}px`,
        transform: `translate3d(${this.barOffset}px,0px,0px)`
      }
    },
  },
  watch:{
    checkList: function (val){
      this.upCount = this.checkList.length
    },
    followIndexData:function (){
      this.changeFollowDataCommon()
    }
  },
  created() {
    if (this.followIndexData!==''){
      this.changeFollowDataCommon()
    }
  },
  methods: {
    // 新增、修改、删除分组
    changeGroupBy(real,name){
      switch (real){
        case 'add':
          this.groupByName = ''
          this.groupByTitle = '新建分组'
          break
        case 'edit':
          this.groupByName = name
          this.groupByTitle = '修改分组名称'
          break
        case 'delete':
          this.deleteIndex = true
          this.groupByTitle = '修改分组名称'
          break
      }
      this.groupReal = real
      this.groupByDialogVisible = true
    },
    // 新增、修改、删除弹出框关闭时的回调
    groupByClose(){
      this.deleteIndex = false
    },
    // 新增、修改、删除确认按钮
    realGroupBy() {
      switch (this.groupReal) {
        case 'add':
          if(this.groupByName!=''){
            console.log('add操作：新增名称：',this.groupByName)
          }else{
            this.$refs.showCoinsMessage.showErrorMsg('名称不能为空！')
            return
          }
          break
        case 'edit':
          if(this.groupByName!=''){
            if (this.groupByName==this.groupByItem.name){
              console.log('edit操作，但是没有改动')
            }else{
              console.log('edit操作',this.groupByName,this.groupByItem)
            }
          }else{
            this.$refs.showCoinsMessage.showErrorMsg('名称不能为空！')
            return
          }
          break
        case 'delete':
          if (this.deleteIndex){
            console.log('delete操作，删除对象：',this.groupByItem)
          }
          break
      }
      this.groupByDialogVisible = false
    },

    // TODO 头像部分：鼠标移入时弹出up详情信息。与评论区头像移出功能相同，但是需要优化，比如当鼠标移入时在开始加载改组件。评论区表情组件需要优化。
    myChengeFollow(){
      this.cursorShowIndex=-5
      this.fansAction = false
    },
    // 分页
    handleCurrentChange(currentPage){
      console.log('当前页：',currentPage)
    },
    // 改变页面数据公共方法
    changeFollowDataCommon(){
      this.cursorShowIndex = parseInt(this.followIndexData)
      // 向后端查询数据
      this.queryFollowData(this.followIndexData)
    },
    ceshi(){
      console.log(this.checkList)
    },
    queryFollowData(followId){
      console.log(followId)
    },
    // 取消选中
    cancelMul(){
      if (this.checkList.length==undefined||this.checkList.length<0) return
      this.checkList = []
    },
  },
}
</script>
<style>
.pagination .el-pagination.is-background .el-pager li.is-active {
  background-color: #00a1d6;
  color: white;
}
.el-popover.el-popper.el-popover-self-five {
  min-width: 80px !important;
  padding: 5px 0;
  width: 80px !important;
  background-color: #fff;
}
.position-ab-label .myRedCheckBox .el-checkbox__label{
  display: none;
}

/* 设置选中后对勾框的边框和背景颜色 */
.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #00a1d6;
  background-color:#00a1d6;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #00a1d6;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover{
  border-color: #00a1d6;
}

</style>

<style scoped>
.g-search {
  position: relative;
  display: inline-block;
  width: 134px;
  height: 30px;
  vertical-align: middle;
  margin-right: 20px;
}
.g-search input {
  position: absolute;
  height: 30px;
  width: 134px;
  padding: 0 29px 0 10px;
  line-height: 30px;
  color: #222;
  font-size: 12px;
  border: 1px solid #ccd0d7;
  border-radius: 15px;
  box-shadow: none;
  box-sizing: border-box;
}
.space_input {
  line-height: 28px;
  height: 28px;
  padding: 0 10px;
  transition: all .3s ease;
  vertical-align: top;
  border: 1px solid #ccd0d7;
  border-radius: 0;
}
.space_input:focus {
  border-color: #00a1d6;
}
.g-search .search-btn {
  position: absolute;
  right: 8px;
  top: 3px;
  /*background-position: -1111px -81px;*/
  color: #e3e5e7;
  cursor: pointer;
}
.search-btn:hover{
  color: #00a1d6;
}
.be-tab {
  position: relative;
  float: left;
  margin-left: 20px;
}
.be-tab-inner{
  list-style: none;
  display: block;
}
.clearfix{
  zoom: 1;
}
.be-tab-item {
  float: left;
  font-size: 12px;
  margin-right: 20px;
  line-height: 28px;
  vertical-align: top;
  cursor: pointer;
}
.be-tab-cursor:after {
  content: "";
  left: 55%;
  transform: translateX(-50%);
  margin-left: -3px;
  border-bottom: 3px solid #00a1d6;
  border-top: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.be-tab-cursor:after {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
}
.be-tab-cursor{
  left: 0;
  border-bottom: 1px solid #00a1d6;
  transition: width .2s ease,transform .2s ease;
}

.isActive {
  color: #00a1d6;
}
.pagination{
  margin: auto;
}
.hover-blue-cursor:hover{
  color: #00a1d6;
  cursor: pointer;
}
.hover-nodrop{
  cursor: not-allowed;
}
.isCheckedColor{
  color: #00a1d6!important;
}
.fav-select-up{
  position: absolute;right: 20px;top: 20px;font-size: 14px;
}
.fav-select-cursor{
  margin-left: 10px;color: #00a1d6;cursor: pointer;
}
.position-ab-label{
  position: absolute;
  top: 31px;
}
.fans-action-follow {
  background-color: #e5e9ef;
  position: relative;
  border-radius: 4px;
  color: #6d757a;
  padding: 4px 11px 4px 9px;
  line-height: 16px;
  border: 0;
  font-size: 14px;
  float: left;
  display: block;
  margin-left: 15px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.fans-action-follow-go {
  position: relative;
  border-radius: 4px;
  color: #6d757a;
  padding: 4px 11px 4px 9px;
  line-height: 16px;
  border: 1px solid #ccd0d7;
  font-size: 14px;
  float: left;
  display: block;
  margin-left: 15px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.fans-action-follow-go:hover{
  color: #00a1d6;
  border: 1px solid #00a1d6;
}
.fans-action-follow:hover{
  color: #00a1d6;
}
.fans-action-menu{
  color: #999;margin-left: 5px;margin-top: 2px;cursor: pointer;
}
.fans-action {
  position: absolute;
  right: 0;
  top: 9px;
}
.auth-description {
  line-height: 14px;
  font-size: 12px;
  color: #6d757a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  padding: 0 200px 0 0;
  position: relative;
  margin-top: 10px;
  margin-left: 88px;
}
.content-mal{
  margin-left: 128px;
}
.content .title{
  font-size: 16px;line-height: 20px;height: 20px;margin-bottom: 10px;
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bili-avatar-right-icon {
  position: absolute;
  right: 0;
  bottom: -4px;
  color: rgb(255, 198, 46);
  /*充电状态第二种颜色*/
  /*color: rgb(74,199,255);*/
}
.content .title .fans-name{
  cursor: pointer;
}
.content .title .fans-name:hover{
  color: #00a1d6;
}
.cover-container {
  position: absolute;
  width: 60px;
  height: 60px;
}
.cover-container-mal{
  margin-left: 40px;
}
.bili-avatar {
  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.list-item {
  border-bottom: 1px solid #eee;
  display: block;
  padding: 20px 0;
  position: relative;
  line-height: 1;
  zoom: 1;
}

.fav-content {
  position: relative;
}

.copy-yido-icon {
  color: rgb(203,208,216);
  margin-right: 5px;
}

.filter-disable li {
  float: left;
  color: #222;
  line-height: 20px;
  margin-right: 30px;
}

.filter-disable {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.fav-right-multiple {
  color: #99a2aa;font-size: 18px;
  cursor: pointer;
}

.back-to-info {
  width: 60px;
  height: 30px;
  cursor: pointer;
  line-height: 28px;
  text-align: center;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  font-size: 12px;
  color: #222;
}
.back-to-info span{
  display: inline-block;
  margin-right: 5px;
}
.back-to-info:hover{
  border: 1px solid #00a1d6;
  color: #00a1d6;
}
.back-to-color{
  color: #99a2aa;font-size: 10px
}
.back-to-info:hover .back-to-color{
  color: #00a1d6;
}
.clickSubscribeMenu {
  background-color: #00a1d6 !important;
  color: white;
}

.clickIconColor {
  color: white !important;
}

.ul-dropdown-item {
  list-style: none;
}

.be-dropdown-item-delimiter {
  padding: 5px;
  text-align: center;
  font-size: 13px;
  color: #222;
  cursor: pointer;
}

.be-dropdown-item-delimiter:hover {
  color: #00a1d6;
  background-color: #e5e9ef;
}

.span-dingyue {
  font-size: 19px;
  color: #999999;
  margin-right: 10px
}

.left-main {
  background-color: white;
  min-height: 650px;
  width: 1282px;
  overflow: hidden;
}

.fav-sidenav {
  position: relative;
  float: left;
  width: 210px;
  font-size: 14px;
  box-sizing: border-box;
}

.fav-sidenav-border {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.fav-main {
  float: left;
  width: 1072px;
  /*左边菜单最小高度*/
  min-height: 750px;
  background-color: white;
  border-left: 1px solid #eee;
}

.section {
  position: relative;
}

.favList-info {
  position: relative;
  padding: 20px 0;
  margin: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e9ef;
}

.components-body {
  position: relative;
  display: flex;
  cursor: pointer;
  padding-left: 20px;
  /*justify-content: center;*/
  align-items: center;
  background: white;
  font-size: 14px;
}

.components-body-span {
  width: 120px;
  line-height: 44px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.components-body-right-span {
  float: right;
}

.components-body-hover:hover {
  background-color: #f4f5f7;
}

/*.components-body-hover:hover .components-body-span{
  color: #00a1d6;
}*/
.follow-add {
  color: rgb(203,208,216);
  position: absolute;
  right: 20px;
}

.caidan-size {
  font-size: 14px;
  color: #d0d0d2;
}
.more-menu{
  display: inline-block;width: 40px;height: 44px;line-height: 44px;
}
.follow-tabs{
  position: absolute;
  top: 20px;
  right: 0;
}
</style>
